<template>
    <div class="essay-card" @click="handlerClickCard">
        <h2 class="title">《{{ essay?.title }}》</h2>
        <div class="author">・{{ essay?.author }}</div>
    </div>
</template>

<script setup lang="ts">
    import { useHomeStore } from "@/store/home";
    import type { Essay } from "@/model/essay";
    import { ref } from "vue";
    import { useRouter } from "vue-router";

    const homeStore = useHomeStore();
    const essay = ref<Essay>();

    homeStore.$subscribe(() => {
        essay.value = homeStore.essayData;
    });

    const router = useRouter();
    const handlerClickCard = () => {
        router.push("/essaydetail");
    };
</script>

<style scoped>
    .essay-card {
        position: relative;
        width: 100%;
        height: 100%;
        padding: 10px;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        background-image: url("@/assets/images/light_fog.jpg");
        background-position: center;
        background-size: cover;
        border-radius: 16px;
        color: white;
        /*border: 2px solid white;*/
    }
    .title {
        cursor: pointer;
        /*padding-top: 20px;*/
        /*align-self: flex-start;*/
    }
    .author {
        position: absolute;
        bottom: 14%;
        right: 10%;
        font-size: 12px;
        opacity: 0.8;
        color: rgb(156, 163, 175);
    }
</style>
